<template>
  <div
    class="enterprise-statistics-container animate__animated"
    :class="[visible ? 'animate__fadeIn' : 'animate__fadeOut']"
  >
    <a-row :gutter="[20, 20]">
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">在网项目统计<span>（个）</span></div>
            <div class="state state-1">延期完成</div>
          </div>
          <div class="dom-body">
            <onlineProjectStatistics></onlineProjectStatistics>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">总进度完成情况<span>（%、个）</span></div>
            <div class="state"></div>
          </div>
          <div class="dom-body">
            <overallProgressCompletion></overallProgressCompletion>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">滞后情况统计<span>（个）</span></div>
          </div>
          <div class="dom-body">
            <lagSituationStatistics></lagSituationStatistics>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">月度计划完成情况<span>（%、个）</span></div>
            <div class="state state-2">按时完成</div>
          </div>
          <div class="dom-body">
            <monthlyPlanCompletion></monthlyPlanCompletion>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">季度计划完成情况<span>（%、个）</span></div>
            <div class="state state-3">提前完成</div>
          </div>
          <div class="dom-body">
            <quarterlyPlanCompletion></quarterlyPlanCompletion>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">年度计划完成情况<span>（%、个）</span></div>
            <div class="state state-3">提前完成</div>
          </div>
          <div class="dom-body">
            <yearPlanCompletion></yearPlanCompletion>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="12">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">进度趋势图<span>（个）</span></div>
          </div>
          <div class="dom-body">
            <progressTrend></progressTrend>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="12">
        <div class="chart-dom">
          <div class="dom-title">
            <div class="text">周报更新情况<span>（个）</span></div>
          </div>
          <div class="dom-body">
            <weekReport></weekReport>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
//在网项目统计
import onlineProjectStatistics from "./components/onlineProjectStatistics";
//总进度完成情况
import overallProgressCompletion from "./components/overallProgressCompletion";
//滞后情况统计
import lagSituationStatistics from "./components/lagSituationStatistics";
//月度计划完成情况
import monthlyPlanCompletion from "./components/monthlyPlanCompletion";
//季度计划完成情
import quarterlyPlanCompletion from "./components/quarterlyPlanCompletion";
//年度计划完成情况
import yearPlanCompletion from "./components/yearPlanCompletion";
//进度趋势图
import progressTrend from "./components/progressTrend";
//周报更新情况
import weekReport from "./components/weekReport";
export default {
  components: {
    onlineProjectStatistics,
    overallProgressCompletion,
    lagSituationStatistics,
    monthlyPlanCompletion,
    quarterlyPlanCompletion,
    yearPlanCompletion,
    progressTrend,
    weekReport,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    treeItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
};
</script>

<style lang="less" scoped>
.enterprise-statistics-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  overflow: auto;
  overflow-x: hidden;
  .chart-dom {
    height: 356px;
    background: @base-bg-color;
    border-radius: 0px 0px 6px 6px;
    display: flex;
    flex-direction: column;
    .dom-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0 0 24px;
      height: 56px;
      font-size: 18px;
      flex-shrink: 0;
      border-bottom: 1px solid @border-color;
      .text {
        span {
          color: #999da5;
          font-size: 14px;
          margin-left: 6px;
        }
      }
      .state {
        width: 86px;
        height: 28px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        &.state-1 {
          background: url(https://jszhgd.cn/static/pc/low-code/state_bg_4.png)
            no-repeat;
          background-size: 100% 100%;
        }
        &.state-2 {
          background: url(https://jszhgd.cn/static/pc/low-code/state_bg_6.png)
            no-repeat;
          background-size: 100% 100%;
        }
        &.state-3 {
          background: url(https://jszhgd.cn/static/pc/low-code/state_bg_2.png)
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .dom-body {
      flex: 1;
      position: relative;
    }
  }
}
</style>
